<template>
  <div class="demo-Circle">
    <div style>
      <i-circle :size="size" :trail-width="4" :stroke-width="5" :percent="75" stroke-linecap="square" stroke-color="#43a3fb">
        <div class="demo-Circle-custom">
          <!-- <h1>{{yesterdayTimes || 475}}</h1> -->
          <h1>{{475}}</h1>
          <p>昨日入园人数(人)</p>
          <span>
            日同比
            <!-- <i>{{yesterdayTB || 110}}%</i> -->
            <i>{{110}}%</i>
          </span>
          <span>

            <!-- <i>{{yesterdayHB}}</i> -->
          </span>
        </div>
      </i-circle>
    </div>
    <div style>
      <i-circle :size="size" :trail-width="4" :stroke-width="5" :percent="75" stroke-linecap="square" stroke-color="#43a3fb">
        <div class="demo-Circle-custom">
          <h1>{{23232}}</h1>
          <p>累计入园人次(人)</p>
          <span>
            同比
            <!-- <i>{{totalTB || 123}}%</i> -->
            <i>123%</i>
          </span>
        </div>
      </i-circle>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    size: {
      type: Number,
      default: 150,
    },
  },
  data() {
    return {
     form:{
      yesterdayTB: "...",
      yesterdayHB: "...",
      yesterdayTimes: "...",
      totalTB: "...",
      totalTimes: 0,
      dayTotal: "...",
     }
    };
  },

  created() {
  // this.getdata(this.form.totalTimes, 23213);
  },
  methods: {
    getdata(count, finalNum) {
      let that = this;
      let timer = setInterval(() => {
        count++;
        console.log('count:',count,"that.totalTimes:",that.form.totalTimes);
        if (count > finalNum) {
          // 避免count大于finalNum最终数字显示不对
         count = finalNum;
          // 清空定时器

          clearInterval(timer);
          timer = null;
        }
      }, 500);
    },
    // this.http.get("https://sr.boss.i-town.cn/kuaibao/skifield", true).then(reslut => {
    //   this.yesterdayTB = Number(reslut.data.yesterdayTB)
    //   this.yesterdayHB = Number(reslut.data.yesterdayHB)
    //   this.yesterdayTimes = Number(reslut.data.yesterdayTimes)
    //   this.totalTB = Number(reslut.data.totalTB)
    //   this.totalTimes = Number(reslut.data.totalTimes)
    // });
  },
};
</script>
<style scoped>
.demo-Circle {
  display: flex;
}
.demo-Circle > div {
  flex: 1;
  text-align: center;
}
.demo-Circle > div:first-child {
  padding-left: 10%;
}

.demo-Circle > div:last-child {
  padding-right: 10%;
}
</style>
<style lang="less" scoped>
.demo-Circle-custom {
  & h1 {
    color: #ffffff;
    font-size: 28px;
    font-weight: normal;
  }
  & p {
    color: #ece8e8;
    font-size: 14px;
    margin: 10px 0 15px;
    &:after {
      content: "";
      display: block;
      width: 50px;
      height: 1px;
      margin: 0 auto;
      background: #e0e3e6;
      position: relative;
      top: 15px;
    }
  }
  & span {
    display: block;
    padding-top: 15px;
    color: wheat;
    font-size: 14px;
    // &:before {
    //   content: "";
    //   display: block;
    //   width: 50px;
    //   height: 1px;
    //   margin: 0 auto;
    //   background: #e0e3e6;
    //   position: relative;
    //   top: -15px;
    // }
  }
  & span i {
    font-style: normal;
    color: white;
  }
}
</style>
